<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/mianStyle/main.css" />
		<style type="text/css">
			body,
			html {
				background: white;
			}

			.discount_lists i {
				font-style: normal;
			}
			.title {
				line-height: 40px;
				margin-bottom: 0;
				padding-left: 20px;
				font-size: 16px;
			}
			.title span {
				font-size: 13px;
			}
			.star img {
				display: block;
				height: 12px;
				margin-top: 4px;
				margin-right: 10px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">我的收藏</h1>
		</header>
		<div class="mui-content" id="collect">
			<div class="this">
				<p class="title">当前区域商家</p>
				<div class="merchant-content">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell mui-media">
							<a href="javascript:;">
								<img class="mui-media-object mui-pull-left" src="images/p2.jpg">
								<div class="mui-media-body">
									啊实打实大声道（阿萨德）
									<div class="content_data mui-overflow">
										<p class="star mui-fl"><img src="images/2.png" class="mui-pull-left"/><span>月销3025</span></p>
										<p class="distance mui-fr">30分钟丨2.3km</p>
									</div>
									<div class="content_lists mui-overflow">
										<p class="contnet_items mui-fl"><span>起送￥20丨配送￥3丨人均￥15</span></p>
										<p class="meituan mui-fr">美团专送</p>
									</div>
									<div class="discount_lists">
										<i class="dot" tabindex="0" status='false' @click="autoShow($event)">v</i>
										<p class="discount_items quan"><span><i>券</i>已有3张最高减30元代金券</span></p>
										<p class="discount_items jian"><span><i>减</i>满39减3,满69减8,满98减10</span></p>
										<p class="discount_items zhe"><span><i>折</i>折扣商品1折起</span></p>
										<p class="discount_items ding"><span><i>订</i>下单多减1元,限09:00-11:30</span></p>
										<p class="discount_items shou"><span><i>首</i>新用户立减20元,首次使用银行卡支付最高再减3元</span></p>
									</div>
								</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media">
							<a href="javascript:;">
								<img class="mui-media-object mui-pull-left" src="images/p2.jpg">
								<div class="mui-media-body">
									啊实打实大声道（阿萨德）
									<div class="content_data mui-overflow">
										<p class="star mui-fl"><img src="images/5.png" class="mui-pull-left"/><span>月销3025</span></p>
										<p class="distance mui-fr">30分钟丨2.3km</p>
									</div>
									<div class="content_lists mui-overflow">
										<p class="contnet_items mui-fl"><span>起送￥20丨配送￥3丨人均￥15</span></p>
										<p class="meituan mui-fr">美团专送</p>
									</div>
									<div class="discount_lists">
										<i class="dot" tabindex="1" status='false' @click="autoShow($event)">v</i>
										<p class="discount_items quan"><span><i>券</i>已有3张最高减30元代金券</span></p>
										<p class="discount_items jian"><span><i>减</i>满39减3,满69减8,满98减10</span></p>
										<p class="discount_items zhe"><span><i>折</i>折扣商品1折起</span></p>
										<p class="discount_items ding"><span><i>订</i>下单多减1元,限09:00-11:30</span></p>
										<p class="discount_items shou"><span><i>首</i>新用户立减20元,首次使用银行卡支付最高再减3元</span></p>
									</div>
								</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media">
							<a href="javascript:;">
								<img class="mui-media-object mui-pull-left" src="images/p2.jpg">
								<div class="mui-media-body">
									啊实打实大声道（阿萨德）
									<div class="content_data mui-overflow">
										<p class="star mui-fl"><img src="images/4.png" class="mui-pull-left"/><span>月销3025</span></p>
										<p class="distance mui-fr">30分钟丨2.3km</p>
									</div>
									<div class="content_lists mui-overflow">
										<p class="contnet_items mui-fl"><span>起送￥20丨配送￥3丨人均￥15</span></p>
										<p class="meituan mui-fr">美团专送</p>
									</div>
									<div class="discount_lists">
										<i class="dot" tabindex="2" status='false' @click="autoShow($event)">v</i>
										<p class="discount_items quan"><span><i>券</i>已有3张最高减30元代金券</span></p>
										<p class="discount_items jian"><span><i>减</i>满39减3,满69减8,满98减10</span></p>
										<p class="discount_items zhe"><span><i>折</i>折扣商品1折起</span></p>
										<p class="discount_items ding"><span><i>订</i>下单多减1元,限09:00-11:30</span></p>
										<p class="discount_items shou"><span><i>首</i>新用户立减20元,首次使用银行卡支付最高再减3元</span></p>
									</div>
								</div>
							</a>
						</li>
					</ul>
				</div>
			</div>
			<div class="other">
				<p class="title">其他区域商家 <span>(距离当前位置较远可能无法配送)</span></p>
				<div class="merchant-content">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell mui-media">
							<a href="javascript:;">
								<img class="mui-media-object mui-pull-left" src="images/p2.jpg">
								<div class="mui-media-body">
									啊实打实大声道（阿萨德）
									<div class="content_data mui-overflow">
										<p class="star mui-fl"><img src="images/4.png" class="mui-pull-left"/><span>月销3025</span></p>
										<p class="distance mui-fr">30分钟丨2.3km</p>
									</div>
									<div class="content_lists mui-overflow">
										<p class="contnet_items mui-fl"><span>起送￥20丨配送￥3丨人均￥15</span></p>
										<p class="meituan mui-fr">美团专送</p>
									</div>
									<div class="discount_lists">
										<i class="dot" tabindex="3" status='false' @click="autoShow($event)">v</i>
										<p class="discount_items quan"><span><i>券</i>已有3张最高减30元代金券</span></p>
										<p class="discount_items jian"><span><i>减</i>满39减3,满69减8,满98减10</span></p>
										<p class="discount_items zhe"><span><i>折</i>折扣商品1折起</span></p>
										<p class="discount_items ding"><span><i>订</i>下单多减1元,限09:00-11:30</span></p>
										<p class="discount_items shou"><span><i>首</i>新用户立减20元,首次使用银行卡支付最高再减3元</span></p>
									</div>
								</div>
							</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/server.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#collect",
				data: {},
				flag: false,
				mounted: function() {
					//					this.init()
				},
				methods: {
					init: function() {
						// 登录状态/登录标识
						localStorage.getItem('loginStatus')
						// 初始化页面数据
						mui.ajax(server + '/collect/getListByCustId', {
							dataType: 'json',
							type: 'get',
							data: {
								userId: userId, // 用户ID
								// 外加登录标识
							},
							success: function(res) {
								if(res.status == 200) { // 请求成功
									// 列表数据
									console.log(res)
								} else {
									// 300  500
									mui.toast(res.msg) // 提示错误信息
								}
							},
							error: function(type) { // 请求失败
								console.log(type)
							}
						})
					},
					openWin: function(urlName, shopId) { // 打开商铺详情页
						mui.openWindow({
							url: urlName,
							id: urlName,
							show: {
								autoShow: true,
								aniShow: "auto",
							},
							extras: { // 额外参数   传入   商铺ID
								shopId: shopId
							},
							waiting: {
								autoShow: true,
								title: '正在加载...'
							}
						})
					},
					autoShow: function(e) {
						//console.log(e.target.tabIndex)
						//console.log(e.target)
						var flag = $(e.target).attr('status');
						console.log(flag);
						if(flag == 'true') {
							$('.discount_lists').eq(e.target.tabIndex).css({
								'max-height': '54px'
							});
							$(e.target).attr('status', false);
						} else {
							$('.discount_lists').eq(e.target.tabIndex).css({
								'max-height': 'none'
							});
							$(e.target).attr('status', true);
						}
					}
				}
			})
		</script>
	</body>

</html>